import React, {Component} from 'react';
import {
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    AsyncStorage,
    Alert,
    Modal,
    TextInput
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
import StyleManProfileDemo from './StyleManProfileDemo';
import StyleManProfileEvaluate from './StyleManProfileEvaluate';
import FetchUtils from './../utils/FetchUtils';
import utils from './../utils/utils';

export default class StyleManProfile extends Component {

    constructor(props) {
        super(props);
        this.evalText = '';
        this.state = {
            showBut: true,
            page: 0,
            size: 20,
            user: {},
            eval: {},
            likeStatus: false,
            resStatus: false,
            modalStatus: false,
        };
    }

    componentDidMount() {
        this._getData();
    }

    render() {

        return (
            <View style={styles.pageView}>
                <View style={styles.scrollContentView}>
                    <View style={styles.upProfileView}>
                        <Image style={styles.upProfileBakImg} source={require('./../../img/mybackground.png')}>
                            <View style={styles.headerView}>
                                <Image style={styles.headerImg}
                                       source={{uri: utils.qiniuUrl + this.state.user.headerImg + utils.qiniu200Url}}/>
                                <Text style={styles.nickNameText}>{this.state.user.username}</Text>
                                <Text style={styles.markText}>{this.state.user.mark}</Text>
                                <Text style={styles.moneyText}>{this.state.user.priceValue}</Text>
                            </View>
                        </Image>
                    </View>
                    <View style={styles.typeButView}>
                        <TouchableOpacity style={[styles.typeBut, this.state.showBut ? {
                            borderColor: '#010101',
                            borderBottomWidth: 3,
                        } : null]} onPress={() => this.onEventClick()}>
                            <Text style={styles.typeButText}>案例</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={[styles.typeBut, !this.state.showBut ? {
                            borderColor: '#010101',
                            borderBottomWidth: 3,
                        } : null]} onPress={() => this.onAssessClick()}>
                            <Text style={styles.typeButText}>评价</Text>
                        </TouchableOpacity>
                    </View>
                </View>

                {this.state.showBut ?
                    <ScrollView
                        showsVerticalScrollIndicator={false}
                        showsHorizontalScrollIndicator={false}
                    >
                        <StyleManProfileDemo datas={this.state.resStatus ? this.state.user.selfImg : null}/>
                    </ScrollView>
                    :
                    <ScrollView showsVerticalScrollIndicator={false}
                                showsHorizontalScrollIndicator={false}
                    ><StyleManProfileEvaluate
                        datas={this.state.resStatus ? this.state.eval : null}
                        userId={this.props.navigation.state.params.userId}
                    />
                    </ScrollView>
                }
                <Modal
                    animationType={"slide"}
                    transparent={true}
                    visible={this.state.modalStatus}
                    onRequestClose={() => {
                        this.setState({
                            modalStatus: false,
                        })
                    }}
                >
                    <KeyboardAwareScrollView>
                        <View style={{
                            backgroundColor: "#FFF",
                            alignSelf: 'center',
                            marginTop: utils.autoheight(utils.screenHeith * 0.3),
                            borderRadius: utils.setSpText(10),
                            borderWidth: utils.autoWidth(2),
                            borderColor: '#000',
                        }}
                        >
                            <View style={{
                                height: utils.autoheight(utils.autoheight(utils.screenHeith * 0.4)),
                                width: utils.autoWidth(utils.screenWidth * 0.95),
                                justifyContent: 'space-between'
                            }}>


                                <TextInput
                                    style={{flex: 1}}
                                    placeholder="请输入评论"
                                    underlineColorAndroid={'transparent'}
                                    multiline={true}
                                    onChangeText={
                                        (text) => {
                                            this.evalText = text;
                                        }
                                    }
                                ></TextInput>
                                <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                                    <TouchableOpacity
                                        style={[styles.modalButStyle, {borderRightWidth: utils.autoWidth(0.5)}]}
                                        onPress={this.submitEvalBut.bind(this)}
                                    >
                                        <Text style={styles.markText}>提交</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={[styles.modalButStyle, {borderLeftWidth: utils.autoWidth(0.5)}]}
                                        onPress={this.onEvaltBut.bind(this)}
                                    ><Text
                                        style={styles.markText}
                                    >取消</Text></TouchableOpacity>
                                </View>

                            </View>
                        </View>
                    </KeyboardAwareScrollView>

                </Modal>

                <View style={styles.bottomButtom}>
                    <TouchableOpacity style={styles.bottomBut} onPress={this.onCollectBut.bind(this)}>
                        <View style={styles.bottomButView}>
                            {!this.state.likeStatus
                                ?
                                <Image style={styles.bottomHeartImg} source={require('./../../img/loveheart3x.png')}/>
                                :
                                <Image style={styles.bottomHeartImg} source={require('./../../img/lovehearted3x.png')}/>
                            }

                            <Text style={styles.bootomHeartText}>收藏</Text>
                        </View>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bottomBut} onPress={this.onEvaltBut.bind(this)}>
                        <View style={styles.bottomButView}>
                            <Image style={styles.bottomEditImg} source={require('./../../img/eval3x.png')}/>
                            <Text style={styles.bootomHeartText}>评价</Text>
                        </View>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bottomChatBut} onPress={this.chatBut.bind(this)}>
                        <View style={styles.bottomButChatView}>
                            <Image style={styles.bottomChatImg} source={require('./../../img/chat_ta3x.png')}/>
                            <Text style={styles.bootomChatText}>联系TA</Text>
                        </View>
                    </TouchableOpacity>

                </View>
            </View>
        );
    }

    /*获取数据*/
    _getData = () => {
        let userId = this.props.navigation.state.params.userId;
        let role = this.props.navigation.state.params.role;
        let param = {
            userId: userId,
            role: role,
            page: this.state.page,
            size: this.state.size,
        };
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.getWithHeader(utils.apiUrl + '/user/styleUserProfile', xToken, param, (res) => {
                if (res.code == 200) {
                    this.setState({
                        user: res.apiData.user,
                        eval: res.apiData.eval,
                        likeStatus: res.apiData.likeStatus,
                        resStatus: true,
                    })
                }
            });
        });
    };

    /*案例按钮点击*/
    onEventClick() {
        this.setState(previousState => {
            return {
                showBut: true
            };
        });
    }

    /*评价按钮点击*/
    onAssessClick() {
        this.setState(previousState => {
            return {
                showBut: false
            };
        });
    }

    /*收藏按钮*/
    onCollectBut() {
        let param = {
            userId: this.state.user.id,
        };
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.postWithParamHeader(utils.apiUrl + '/user/CollectOrNo', param, xToken, (res) => {
                if (res.code != 200) {
                    Alert.alert("警告", res.apiData);
                } else {
                    this.setState({likeStatus: !this.state.likeStatus})
                }
            });
        });
    }

    /*评价按钮*/
    onEvaltBut() {
        this.setState({
            modalStatus: !this.state.modalStatus,
        })
    }

    /*评价提交按钮*/
    submitEvalBut() {
        let param = {
            userId: this.state.user.id,
            evaMsg: this.evalText,

        };
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.postWithParamHeader(utils.apiUrl + '/user/postEval', param, xToken, (res) => {
                if (res.code != 200) {
                    Alert.alert("警告", res.apiData)
                    this.setState({
                        modalStatus: false,
                    })
                } else {
                    Alert.alert("通知", "提交成功");
                    this.setState({
                        modalStatus: false,
                    });
                    this._getData();
                }
            });
        });
    }

    /*聊天按钮*/
    chatBut() {
        let {navigate} = this.props.navigation;
        navigate('ChatPageNav', {toUser: this.state.user});
    }
};
const styles = StyleSheet.create({
    pageView: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        backgroundColor: '#FFFFFF',
    },
    upProfileView: {
        height: utils.autoheight(180),
        width: utils.screenWidth,
    },
    upProfileBakImg: {
        height: utils.autoheight(180),
        width: utils.screenWidth,
    },
    scrollContentView: {
        flexDirection: 'column',
    },
    headerView: {
        marginTop: utils.autoheight(10),
        flexDirection: 'column',
        alignItems: 'center',
    },
    headerImg: {
        height: utils.autoWidth(90),
        width: utils.autoWidth(90),
        borderRadius: utils.autoWidth(45),
    },
    nickNameText: {
        fontSize: utils.setSpText(20),
        color: '#010101',
    },
    markText: {
        fontSize: utils.setSpText(15),
        color: '#010101',
    },
    moneyText: {
        fontSize: utils.setSpText(15),
        color: '#A0A0A0',
    },
    typeButView: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        height: utils.autoheight(44),
        borderBottomWidth: utils.autoWidth(0.5),
        borderColor: '#D5D5D5',
    },
    typeBut: {
        width: utils.autoWidth(100),
    },
    typeButText: {
        fontSize: utils.setSpText(15),
        color: '#000',
        alignSelf: 'center',
    },
    bottomButtom: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        height: utils.autoheight(44),
        borderWidth: utils.autoWidth(0.3),
        borderColor: '#000',
    },
    bottomBut: {
        justifyContent: 'center',
        flex: 1,
    },
    bottomButView: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    bottomHeartImg: {
        height: utils.autoWidth(16),
        width: utils.autoWidth(17),
    },
    bottomEditImg: {
        height: utils.autoWidth(13.5),
        width: utils.autoWidth(13.5),
    },
    bootomHeartText: {
        fontSize: utils.setSpText(11),
        color: '#000',
    },
    bottomButChatView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    bootomChatText: {
        fontSize: utils.setSpText(15),
        color: '#FFFFFF',
    },
    bottomChatBut: {
        flex: 2,
        justifyContent: 'center',
        backgroundColor: '#000',
    },
    bottomChatImg: {
        width: utils.autoWidth(27),
        height: utils.autoheight(18),
        marginRight: utils.autoWidth(16),
    },
    listMy: {
        justifyContent: 'space-around',
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: utils.screenWidth,
    },
    listViewStyle: {
        // 主轴方向
        flexDirection: 'row',
        // 一行显示不下,换一行
        flexWrap: 'wrap',
        // 侧轴方向
        alignItems: 'center', // 必须设置,否则换行不起作用
    },
    modalButStyle: {
        flex: 1,
        borderTopWidth: utils.autoWidth(1),
        borderColor: '#000',
        alignItems: 'center',
        height: utils.autoheight(utils.screenHeith * 0.08),
        justifyContent: 'center',
    }
});